<template>
    <!-- 主窗体开始 -->
    <div  class="bg-grey pb-30">
        <MyCarousel></MyCarousel>
        <!-- End feature -->
        <div class="container">
            <!-- 标题title和tags开始 -->
            <div class="hot-tags pt-30 pb-30 font-small align-self-center">
                <div class="widget-header-3">
                    <div class="row align-self-center">
                        <div class="col-md-4 align-self-center">
                            <h5 class="widget-title">置顶文章</h5>
                        </div>
                        <div class="col-md-8 text-md-right font-small align-self-center">
                            <p class="d-inline-block mr-5 mb-0"><i class="elegant-icon  icon_tag_alt mr-5 text-muted"></i>热门标签:</p>
                            <!-- <ul class="list-inline d-inline-block tags">
                                <li class="list-inline-item"><a href="#"># Covid-19</a></li>
                                <li class="list-inline-item"><a href="#"># Inspiration</a></li>
                                <li class="list-inline-item"><a href="#"># Work online</a></li>
                                <li class="list-inline-item"><a href="#"># Stay home</a></li>
                            </ul> -->
                        </div>
                    </div>
                </div>
            </div>
             <!-- 标题title和tags结束 -->
            <div class="loop-grid mb-30">
                <div class="row">
                    <LeftCard></LeftCard>
                    <RightCard></RightCard>
                </div>
            </div>
        </div> 
    </div>
    <!-- 主窗体结束 -->
</template>

<script>
import {getRecentCommentList} from '@/api/article'
//引入对应的组件
import LeftCard from '@/views/home/leftcard'
import RightCard from '@/views/home/rightcard'
export default {
    name: '',
    components:{
        LeftCard,
        RightCard
    },
    data() {
    return {
        comments:[]
    }
  },
  methods: {
    recentComment(){
        getRecentCommentList().then((res)=>{
            if(res.code == 200){
                this.comments = res.data.recordList;
            }
        })
    },
  },
  mounted() {
  }

}
</script>

<style  scoped>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 100px;
    margin: 0;
  }
  .el-carousel-item img{
  width: 100%;
  height: 100%;
}

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
</style>